<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="com.yaodian100.core.common.utils.ServerValue"%>       
    <%@ taglib prefix="s" uri="/struts-tags"%>
<%@taglib prefix="pu" uri="/WEB-INF/tld/pageutil.tld" %>
<%@taglib prefix="mu" uri="/WEB-INF/tld/mallutil.tld" %>
<%@taglib uri="http://java.sun.com/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jstl/core_rt" prefix="c-rt"%>
<%@taglib uri="http://java.sun.com/jstl/fmt_rt" prefix="fmt-rt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@taglib uri="/WEB-INF/tld/importTag.tld" prefix="import" %>
<style> 
.promo-popup{padding:10px;*padding:10px 0 10px 8px; color:#666;line-height:1.4em; }
.promo-popup h2,.promo-popup h3{font-size:15px;color:#d12e6f; margin-bottom:.8em;}
.promo-popup h3{color:#666;}
.promo-popup p{margin:.5em 0;}
.promo-popup .d-line{background:url(/images/link_dote.gif) repeat-x scroll 0 50%; padding:1px 0;}
.promo-popup ol,.promo-popup ul{margin-bottom:1em;margin-left:2em;}
.promo-popup li{list-style:decimal;}
</style>
<script src="/js/pageable.js"></script>
${pu:reqSet('order', pu:get('com.yaodian100.ec.order.entity.Orders', param.orderId)) }
<script>
$(function(){ 
	$('#current_location').html(' > 变更支付方式');
}); 
</script>
<c-rt:if test="${order.memberId==mu:memberId()}">

<script>
$().ready(function(){
	<c-rt:if test="${order.allowSplit=='Y' && order.paymentTp!='30'&&order.paymentTp!='60'}">
	$("#allowSplitDialog").dialog({
		bgiframe: true,
		width:435,
		autoOpen: false,
		modal: true
	});
	$("#allowSplitConfirm").click(function(){
		$("#modPayTpForm").submit();
	});

	$("#allowSplitCancel").click(function(){
		$("#allowSplitDialog").dialog('close');
	});
	</c-rt:if>

	<c-rt:if test="${(fn:length(order.orderProduct)>1 && order.receiverTp != '30') && (order.paymentTp == '30' || order.paymentTp == '60')}">
	$("#choseAllowSplitDialog").dialog({
				bgiframe: true,
				width:510,
				height:250,
				autoOpen: false,
				modal: true
	});   	
	$("#choseAllowSplitCancel").click(function(){
		$("#choseAllowSplitDialog").dialog('close');
	});
	$("#choseAllowSplitConfirm").click(function(){
		$("#choseAllowSplit").hide();
		if ($('input[name*=choseAllowSplit]').is(":checked") == false){
			$("#choseAllowSplitTip").show();
			return false;
		}
		$("#allowSplit").val($('input[name*=choseAllowSplit]:checked').val());
		$("#modPayTpForm").submit();
	});
	</c-rt:if>
	
	if( ${order.paymentTp} == '10'){
		swithDis($("#paytype10"),true,"radio");
		$("#paytype10").attr("checked",false);
		$("#showMessage").hide();
	}
	if(${order.paymentTp} == '20'){
		swithDis($("#paytype20"),true,"radio");
		$("#paytype20").attr("checked",false);
		$("#showMessage").hide();
	}
	if( ${order.paymentTp} == '30' || ${order.paymentTp} == '60'){
		swithDis($("#paytype10"),false,"radio");
		$("#paytype10").attr("checked",false);
		swithDis($("#paytype20"),false,"radio");
		$("#paytype20").attr("checked",false);
		swithDis($("#paytype40"),false,"radio");
		$("#paytype40").attr("checked",false);
		swithDis($("#paytype50"),false,"radio");
		$("#paytype50").attr("checked",false);
		swithDis($("#paytype70"),false,"radio");
		$("#paytype70").attr("checked",false);
		if (${order.paymentTp} == '30'){
			swithDis($("#paytypeCash"),true,"radio");
			$("#paytypeCash").attr("checked",false);
		}
		if (${order.paymentTp} == '60'){
			swithDis($("#paytypePos"),true,"radio");
			$("#paytypePos").attr("checked",false);
		}
	}
	if( ${order.paymentTp} == '40'){
		swithDis($("#paytype40"),true,"radio");
		$("#paytype40").attr("checked",false);
	}
	if( ${order.paymentTp} == '50'){
		swithDis($("#paytype50"),true,"radio");
		$("#paytype50").attr("checked",false);
		swithDis($("#paytype70"),false,"radio");
		swithDis($("#paytype30"),false,"radio");
		swithDis($("#paytypeCash"),false,"radio");
		swithDis($("#paytypePos"),false,"radio");
		$("#paytype30").attr("checked",false);
		$("#paytypeCash").attr("checked",false);
		$("#paytypePos").attr("checked",false);
	}
	if( ${order.paymentTp} == '70'){
		swithDis($("#paytype70"),true,"radio");
		$("#paytype70").attr("checked",false);
		swithDis($("#paytype50"),false,"radio");
		swithDis($("#paytype30"),false,"radio");
		swithDis($("#paytypeCash"),false,"radio");
		swithDis($("#paytypePos"),false,"radio");
		$("#paytype30").attr("checked",false);
		$("#paytypeCash").attr("checked",false);
		$("#paytypePos").attr("checked",false);
	}

	<%--如账户余额不足支付，则disable该选项；如账户余额足够，则需支付全额的应付总额。--%>
	if(parseFloat(${member.balance.virtualBalance}) < parseFloat(${order.joinMustPay})){
		swithDis($("#paytype40"),true,"radio");
		$("#paytype40").attr("checked",false);
	}

	$("#chkPayType").dialog({
		bgiframe: true,
		autoOpen: false,
		height: 200,
		width:400,
		modal: true
	});	
	$("#chkOK").click(function(){
		$("#chkPayType").dialog('close');
	});

	//订单金额超过10000元，不提供货到付款服务
	var totalPrice = parseFloat(${order.totalPrice})-parseFloat(${order.bonus})-parseFloat(${order.coupon})+parseFloat(${order.shipfare})-parseFloat(${order.discount})+parseFloat(${order.codFee});
	if(parseFloat(totalPrice)>10000){
		disableCodPos();
		$("#showOrderPriceLimit").html("(订单金额超过10000元，不提供货到付款服务。");
		$("#displayPOS").hide();
	}

	//如该订单为"门店取货"，则disable「货到付款」选项供选择。
	if(${order.receiverTp} == '30'){
		disableCodPos();
		$("#showOrderPriceLimit").html("(达芙妮门店取货暂不支援");
		$("#displayPOS").hide();
	}
	//如该订单为拆单，则disable「货到付款」选项供选择。
	if('${order.orderId}' != '${order.joinOrders}'){
		disableCodPos();
		$("#showOrderPriceLimit").html("(合并结帐暂不支援");
		$("#displayPOS").hide();
	}
	if('false'=='${showCod}'){
		disableCodPos();
		$("#displayPOS").hide();
	}

	//如选择货到付款，则default选择现金选项。
	$('input[id=paytype30]').click(function() {
		$("#paytype30").attr("checked",true);//for ie6
		if ($('input[id=paytypeCash]').is(":checked") == false && $('input[id=paytypePos]').is(":checked") == false){
			$("#paytypeCash").attr("checked",true);
			$("#paytype30").val("30"); 
			$("#paytype30").attr("checked",true);//for ie6
			$("#paytype10").attr("checked",false);
			$("#paytype20").attr("checked",false);
			$("#paytype40").attr("checked",false);
			$("#paytype50").attr("checked",false);
			$("#paytype70").attr("checked",false);
			$("#paytypePos").attr("checked",false);
		}
	});

	$('input[id=paytypeCash]').click(function() {
		$("#paytype30").attr("checked",true);
		$("#paytype30").val("30"); 
		$("#paytypeCash").attr("checked",true);
		$("#paytype10").attr("checked",false);
		$("#paytype20").attr("checked",false);
		$("#paytype40").attr("checked",false);
		$("#paytype50").attr("checked",false);
		$("#paytype70").attr("checked",false);
		$("#paytypePos").attr("checked",false);
	});
	$('input[id=paytypePos]').click(function() {
		$("#paytype30").attr("checked",true);
		$("#paytype30").val("60");  
		$("#paytypePos").attr("checked",true);
		$("#paytype10").attr("checked",false);
		$("#paytype20").attr("checked",false);
		$("#paytype40").attr("checked",false);
		$("#paytype50").attr("checked",false);
		$("#paytype70").attr("checked",false);
		$("#paytypeCash").attr("checked",false);
	});

	$('input[id=paytype10]').click(function() {
		$("#paytype30").attr("checked",false);
        unCheckPos();
        $("#paytype10").attr("checked",true);
	});
	$('input[id=paytype20]').click(function() {
		$("#paytype30").attr("checked",false);
        unCheckPos();
        $("#paytype20").attr("checked",true);
	});
	$('input[id=paytype40]').click(function() {
		$("#paytype30").attr("checked",false);
        unCheckPos();
        $("#paytype40").attr("checked",true);
	});

	$('input[id=paytype50]').click(function() {
		$("#paytype30").attr("checked",false);
        unCheckPos();
        $("#paytype50").attr("checked",true);
	});

	$('input[id=paytype70]').click(function() {
		$("#paytype30").attr("checked",false);
        unCheckPos();
        $("#paytype70").attr("checked",true);
	});
	
	isPos();
	
	//判斷是否使用POS
	function isPos(){
		if('${showPos}'=='N'){
			swithDis($("#paytypePos"),true,"radio");
			//$("#paytypePos").attr("disabled",true); 
			if( ${order.paymentTp} == '30') {
				swithDis($("#paytype30"),true,"radio");
				$("#paytype30").attr("checked",false);
			}
			$("#posMessage").html("<span class='txt-rd'><%=ServerValue.getOrderModiyAddress()%></span>");
		}else{
			$("#posMessage").html("");
		}	
	}

	//upcheck POS cash & pos
	function unCheckPos(){
		$("#paytypeCash").attr("checked",false);
		$("#paytypePos").attr("checked",false);	
	}

	function disableCodPos(){
		swithDis($("#paytype30"),true,"radio");
		swithDis($("#paytypeCash"),true,"radio");
		swithDis($("#paytypePos"),true,"radio");		
		$("#paytype30").attr("checked",false);
		$("#paytypeCash").attr("checked",false);
		$("#paytypePos").attr("checked",false);
	}
	//disable的input欄位，換成圖片，適用checkbox和radio
	function swithDis(obj, disabled, type) {
	    if (!disabled) {
	        //alert("a");
	        var oldButton = obj;
	        var oldButtonId = obj.attr('id');
	        var oldButtonNm = obj.attr('name');
	        var oldButtonValue = obj.val();
	        var newButton = $('<input />');

	        newButton.attr("type", type);
	        newButton.attr("name", oldButtonNm);
	        newButton.val(oldButtonValue);

	        newButton.attr("id", "temp");
	        newButton.attr("disabled", false);
	        newButton.insertBefore(oldButton);
	        oldButton.remove();
	        newButton.attr("id", oldButtonId);
	    } else if (disabled) {
	        var oldButton = obj;
	        var oldButtonId = obj.attr('id');
	        var oldButtonNm = obj.attr('name');
	        var oldButtonValue = obj.val();
	        var newButton = $('<img id=temp/>');

	        newButton.attr("name", oldButtonNm);
	        newButton.val(oldButtonValue);

	        if (type == 'radio') {
	            newButton.attr("src", "http://www.yaodian100.com/images/rdb.jpg");//class='dis-rdb'
	            newButton.addClass('dis-rdb');
	        } else if (type == 'checkbox') {
	            newButton.attr("src", "http://www.yaodian100.com/images/ddb.jpg");//class='dis-ddb'
	            newButton.addClass('dis-ddb');
	        }
	        newButton.insertBefore(oldButton);
	        oldButton.remove();
	        newButton.attr("id", oldButtonId);
	    }
	}
	
    $("#paytb").show();

	$("#go_next").click(function() {
		if ($('input[name*=paytype]').is(":checked") == false){
			$('#chkPayType').dialog('destroy');
			$('#chkPayType').dialog({
				closeOnEscape: false,
				open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); },
				bgiframe: true,
				width:380,
				modal: true
			});
			return false;
		}else{
			<c-rt:if test="${order.allowSplit=='Y' && order.paymentTp!='30'&&order.paymentTp!='60'}">
			var paymentTp = $('input[name*=paytype]:checked').val();
			if(paymentTp==30||paymentTp==60){
				$("#allowSplitDialog").dialog('open');
				return false;
			}
			</c-rt:if>
			<c-rt:if test="${(fn:length(order.orderProduct)>1 && order.receiverTp != '30') && (order.paymentTp == '30' || order.paymentTp == '60')}">
			var paymentTp = $('input[name*=paytype]:checked').val();
			if(paymentTp!=30&&paymentTp!=60){
				$("#choseAllowSplitTip").hide();
				$("#choseAllowSplitDialog").dialog('open');
				return false;
			}  	
			</c-rt:if>
			$("#modPayTpForm").submit();
			return false;
		}	
	});

	if('${showCodAlert}'=='Y'){
		alert("该订单超过货到付款使用限制，请改使用其他支付方式");
	}
});
</script>
<s:form action="orderMod/modPayTp.do" id="modPayTpForm" name="modPayTpForm" method="post">
<input type="hidden" name="orderId" value="${order.orderId}"/>
<input type="hidden" name="allowSplit" value="" id="allowSplit"/>
  <!-- content start -->
  <div class="content order-modify">
    <!-- 我的訂單 -->
      <h2>变更支付方式</h2>
     
	      <div class="d-show">
	        <p><strong>当前的支付方式：</strong>${paymentTpMenu.options[order.paymentTp].name}</p>
<c-rt:if test="${order.orderId ne order.joinOrders}">
	        <p><strong>合并结帐：</strong>订单 ${order.joinOrders} 将一并变更</p></c-rt:if>
	        <p><strong>当前的应付总额：</strong><span class="txt-rd">￥<fmt:formatNumber pattern="######0.0"  value="${order.joinMustPay}"/>元</span></p>
	        <p class="c-f" style="border-bottom:1px solid #ccc; height:10px; margin:15px 0;">&nbsp;</p>
	        <p ><strong>变更为其他支付方式：</strong></p>
	         		<div id="showMessage">
	         			<c-rt:if test="${order.joinMustPay >0}">
	                    <table width="80%" border="0" cellspacing="0" cellpadding="0" id="paytb" style="display:none">
	                      <div id="div40">
	                        <tr>
	                          <td width="20"><input id="paytype40" name="paytype" type="radio" value="40"></td>
	                          <td><p>用账户余额支付订单全额：<strong>￥ ${order.joinMustPay}元</strong> / 目前我的账户余额为 ￥<span id="myVirtualBalance">${member.balance.virtualBalance}</span> 元</p></td>
	                        </tr>
	                        </div>
		                        <tr ${order.paymentTp=='50'?"style='display:none'":""}>
		                          <td width="20"><input id="paytype50" name="paytype" type="radio" value="50"> </td>
		                          <td><strong>网上支付</strong></td>
		                        </tr>
		                        <tr ${order.paymentTp=='50'?"style='display:none'":""}>
		                          <td>&nbsp;</td>
		                          <td><p><strong>第三方支付：</strong></p>
		                                 <p class="sub-bank">银联、财付通、快钱、支付宝</p>
		               					 <p><strong>银行支付：</strong></p>
		               				 	 <p class="sub-bank">工商银行、农业银行、建设银行、交通银行、蒲发银行、招商银行、广发银行</p>
		                         </td>
		                        </tr>
		                        <c-rt:if test="${empty order.tuangouId}">
		                        <tr ${order.paymentTp=='70'?"style='display:none'":""}>
		                          <td width="20"><input id="paytype70" name="paytype" type="radio" value="70"> </td>
		                          <td><strong>信用卡：单期付款</strong></td>
		                        </tr>
		                        <tr ${order.paymentTp=='70'?"style='display:none'":""}>
		                          <td>&nbsp;</td>
		                          <td><p><strong>信用卡：单期付款</strong></p>
		                                 <p class="sub-bank">
		                                 <c-rt:forEach items="${billBankSingleCodeMenu.options}" var="bankCode">
											<c-rt:set var="bankNames">${bankNames}${bankCode.value.name}、</c-rt:set>
										</c-rt:forEach>
										${fn:substring(bankNames,0,fn:length(bankNames)-1)}
		                                 </p>		               					 
		                         </td>
		                        </tr>	
		                        <tr ${order.paymentTp=='20'?"style='display:none'":""}>
		                          <td width="20"><input type="radio" id="paytype20" name="paytype" value="20"></td>
		                          <td><strong>邮局汇款</strong> <span class="txt-gy">(至邮局柜台汇款)</span></td>
		                        </tr>
		                        <tr ${order.paymentTp=='10'?"style='display:none'":""}>
		                          <td width="20"><input id="paytype10" name="paytype" type="radio" value="10"></td>
		                          <td><strong>银行汇款</strong> <span class="txt-gy">(至银行柜台汇款)</span></td>
		                        </tr>
		                        <tr>
		                          <td valign="top">
		                          <input id="paytype30" name="paytype" type="radio" value=""></td>
		                          <td><strong>货到付款</strong> <span class="txt-rd"><strong id="showOrderPriceLimit" >(<strong>需加收手续费 ${codFee}元</strong></strong>)</span>
		                            <div id="displayPOS">
				                            <div>
				                              <p>
				                               <input id="paytypeCash" name="paytypecp" type="radio" value="30" />
				                           	     现金 </p>
				                          </div>
				                            <div>
				                              <p>
				                                <input id="paytypePos" name="paytypecp" type="radio" value="60" />
				                                POS机刷卡<strong id="posMessage"></strong></p>
									</div></div>     
				                          </td>
		                     	 </tr>
		                     	 </c-rt:if>
	                      </table>
	                </c-rt:if>  
	                <c-rt:if test="${order.joinMustPay ==0}">
	                		应付总额為￥0.0元，無支付方式
	                 </c-rt:if> 
	             </div>
	               <c-rt:if test="${order.paymentTp =='10' || order.paymentTp =='20'}">
	                		银行or邮局转帐无法修改支付方式
	                 </c-rt:if>   
	        <p class="c-f" align="center"><br />
	        
	        <a id="go_next"  href="javascript:;" class="btn-mid">继续</a> 
	        <a href="<%=ServerValue.getFrontContextPath()%>/member/order/page.do?page=detail&orderId=${order.orderId}" class="btn-mid">回订单页</a>
	        </p>
	      </div>
	   
   <!-- 我的訂單 -->
  </div>
  <!-- content end --> 
  </s:form>
</c-rt:if>
<c-rt:if test="${order.memberId!=mu:memberId()}">
您无权查看本订单
</c-rt:if>
<div id="dialog"></div>
<DIV id="chkPayType" title="请重新选择" class="alert-caution" style="display: none;">
         <p>请选择您所要变更的支付方式。</p>
         <div align="center"><a href="javascript:;"  id="chkOK" class="btn-mid" onfocus="blur()">确定</a></div>

</DIV>
<c-rt:if test="${order.allowSplit=='Y' && order.paymentTp!='30'&&order.paymentTp!='60'}">
<DIV id="allowSplitDialog" title="温馨提示" class="od-cancel-dailog" style="display: none;">
<form>
        <div class="discount-way">
          <ul>
            <li class="w-1of1"><p>亲，您的“商品缺货配送处理方法”有货先发<span class="txt-rd">不支持货到付款</span>，<br />您确定将支付方式改为货到付款后，若订单中部分商品缺货，<br />则会等到商品补齐再配送。</p></li>
          </ul>
	    </div>
    <p class="c-f" style="text-align:center; margin-bottom:1em;">
    <a href="javascript:;" class="btn-mid" onFocus="blur()" id="allowSplitConfirm">我知道了</a>
    <a href="javascript:;" class="btn-mid" onFocus="blur()" id="allowSplitCancel">取消</a>
    </p>
</form>
</DIV>
</c-rt:if>
<c-rt:if test="${(fn:length(order.orderProduct)>1 && order.receiverTp != '30') && (order.paymentTp == '30' || order.paymentTp == '60')}">
<div id="choseAllowSplitDialog" title="温馨提示" class="od-cancel-dailog" style="display: none;">
<form>
        <div class="discount-way">
          <ul>
            <li class="w-1of1"><p style="font-size:15px;">亲，您所选的支付方式需要选择<span class="txt-rd"> “商品缺货配送处理方法”</span></p><br /></li>
            <li class="w-1of1 narrow-h"><label><input name="choseAllowSplit" type="radio" value="Y" /> <strong>有货先发</strong>（若订单中部分商品缺货，优先配送有货商品，<br />订单将会被拆分成多张订单，总订单金额不变，<span class="txt-rd">不支持货到付款</span>）</label><br /><br /></li>
            <li class="w-1of1 narrow-h"><label><input name="choseAllowSplit" type="radio" value="N" /> <strong>货齐再发</strong>（若订单中部分商品缺货，则会等到商品补齐再配送）</label></li>
          </ul>
	    </div>
	<span id="choseAllowSplitTip" class="msg rn" style="display:none">请选择商品缺货配送处理方法</span><br />
    <p class="c-f" style="text-align:center; margin-bottom:1em;">
    <a href="javascript:;" class="btn-mid" onFocus="blur()" id="choseAllowSplitConfirm">确定</a>
    <a href="javascript:;" class="btn-mid" onFocus="blur()" id="choseAllowSplitCancel">取消</a>
    </p>
</form>
</div>    	
</c-rt:if>
